<template>
  <!--
    城市  工作经验  学历  技能
  -->
<el-form ref="form" :model="form" label-width="80px">

  <el-form-item label="选择城市">
    <el-select v-model="form.city" placeholder="请选择城市">
      <el-option label="太原" value="1"></el-option>
      <el-option label="北京" value="2"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="工作年限">

    <el-select v-model="form.workage" placeholder="工作年限">
      <el-option label="1年" value="1"> </el-option>
      <el-option label="2年" value="2"></el-option>
      <el-option label="3年" value="3"></el-option>
      <el-option label="4年" value="4"></el-option>
    </el-select>
  </el-form-item>


  <el-form-item label="选择学历">
    <el-select v-model="form.education" placeholder="选择学历">
      <el-option label="专科" value="1"> </el-option>
      <el-option label="本科" value="2"></el-option>
      <el-option label="硕士" value="3"></el-option>
      <el-option label="博士" value="4"></el-option>
      <el-option label="不限" value="0"></el-option>
    </el-select>
  </el-form-item>


  <el-form-item label="选择技能">
    <el-checkbox-group v-model="form.skills">
      <el-checkbox :label="item[1]" name="type" v-for="item in opts"> {{item[0]}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即预测</el-button>
    <el-button>重置</el-button>
  </el-form-item>
    <div>  预测薪资:{{salary}}</div>
</el-form>
</template>

<script>

export default {
    data() {
      return {
        form: {
          city: '',
          workage: '',
          education: '',
          skills: []
        },
        opts:[],
        salary:0
      }
    },
    methods: {
      onSubmit() {
          let search=new URLSearchParams(this.form).toString()
          fetch("http://127.0.0.1:5000/predict?"+search).then((e)=>{
            return e.json()
          }).then((e)=>{
            this.salary=e
          })
      }
    },
    mounted() {
      fetch("http://127.0.0.1:5000/getrgznScore").then((e)=>{
        return e.json()
      }).then((e)=>{
        this.opts=e.slice(0,10)
      })
    }
}
</script>

<style scoped>

</style>